<template>
  <div class="main">
    <div class="left">
      <div id="chart1">
        <div class="chart1-top">
          <b>这些企业正在招聘</b>
          <company-logo v-bind:company-logo="this.data.companyLogo"></company-logo>
          <div class="clear"></div>
        </div>
        <div class="chart1-bottom">
          <base-data v-bind:base="this.data.base"></base-data>
        </div>
      </div>
      <div id="chart2">
        <position-by-language class="chart2-main"
                              v-bind:position-by-language="this.data.positionByLanguage"></position-by-language>
        <language-counts class="chart2-main" v-bind:language-counts="this.data.languageCounts"></language-counts>
      </div>
      <div id="chart3">
        <position-by-salary v-bind:position-by-salary="this.data.positionBySalary"
                            v-bind:company-by-size="this.data.companyBySize"></position-by-salary>
      </div>
    </div>
    <div class="center">
      <position-by-city v-bind:position-by-city="this.data.positionByCity"></position-by-city>
    </div>
    <div class="right">
      <div id="chart4">
        <top5-by-district v-bind:tabledata="this.data.top5ByDistrict"></top5-by-district>
      </div>
      <div id="chart5">
        <salary-by-work-year v-bind:salaryByWorkYear="this.data.salaryByWorkYear"></salary-by-work-year>
      </div>
      <div id="chart6">
        <position-by-education class="chart6-main"
                               v-bind:position-by-education="this.data.positionByEducation"></position-by-education>
        <advantage-words class="chart6-main" v-bind:advantage-words="this.data.advantageWords"></advantage-words>
      </div>
    </div>
    <div class="clear"></div>

  </div>

</template>

<script>
  import {mapGetters} from 'vuex'
  import companyLogo from '../../components/Echarts/newCompanyLogo'
  import baseData from '../../components/Echarts/baseData'
  import positionByLanguage from '../../components/Echarts/positionByLanguage'
  import languageCounts from '../../components/Echarts/languageCounts'
  import positionBySalary from '../../components/Echarts/positionBySalary'
  import top5ByDistrict from '../../components/Echarts/top5ByDistrict'
  import salaryByWorkYear from '../../components/Echarts/salaryByWorkYear'
  import positionByEducation from '../../components/Echarts/positionByEducation'
  import advantageWords from '../../components/Echarts/advantageWords'
  import positionByCity from '../../components/Echarts/positionByCity'
  import store from "../../store"

  let webSocket;


  export default {
    name: 'Dashboard',
    data() {
      return {
        data: {}

      }
    },
    methods: {

      //初始化data对象（假数据）
      initData() {
        console.log(this.$socket);
        this.data = {
          companyLogo:
            ['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1782959667,617309577&fm=26&gp=0.jpg',
              'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1151834211,158545213&fm=26&gp=0.jpg',
              'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=581833926,2926585461&fm=11&gp=0.jpg',
              'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3190441126,995644236&fm=26&gp=0.jpg'],  // 20条Company-Logo URL
          base: {
            "positionCount": "1415", // int 职位总数
            "companyCount": "15",    // int 公司总数
            "salaryAvg": "14590"     // int 平均薪资，单位：元
          },
          positionByLanguage: [154, 15, 126, 153, 164],      //int 5个元素分别对应Java，PHP，C++，iOS，Python
          languageCounts: [154, 15, 126, 153, 164],          //int 5个元素分别对应: Java，PHP，C++，iOS，Python
          positionBySalary: [154, 15, 126, 153, 164, 123, 11], //int 7个元素分别对应: 5K以下、5-10K、10-15K、15-20K、20-25K、25-30K、30K+
          companyBySize: [123, 112, 333, 44, 21],            //int 分别对应：少于15人、15-50人、50-500人、500-2000人、2000人以上
          positionByCity: [
            {name: '北京', value: 190},
            {name: '广州', value: 180},
            {name: '上海', value: 170},
            {name: '招远', value: 12}   // 请将value从大到小排序，value相同的城市排序随机
          ],
          top5ByDistrict: [
            {name: '北京东城区', positionCount: 190, companyCount: 179, salaryAvg: 16800},
            {name: '广州西城区', positionCount: 180, companyCount: 179, salaryAvg: 16800},
            {name: '上海静安区', positionCount: 170, companyCount: 179, salaryAvg: 16800},
            {name: '上海西城区', positionCount: 150, companyCount: 179, salaryAvg: 16800},
            {name: '广州五羊区', positionCount: 140, companyCount: 179, salaryAvg: 16800},
            // 请将positionCount从大到小排序, positionCount相同的按照salaryAvg从小到大排序
          ],
          salaryByWorkYear: [6820, 12340, 13342, 23345, 28900, 38991], //int 6个元素分别对应: 不限、应届毕业生、 3年以下、 3-5年、5-10年、10年以上
          positionByEducation: [820, 3340, 1342, 2345],          //int 4个元素分别对应: 不限、大专、本科/硕士、博士
          advantageWords: [
            {name: '打卡灵活', value: 190},
            {name: '股票期权', value: 180},
            {name: '包三餐', value: 170},
            {name: '国企稳定', value: 12}   // 请将value从大到小排序，value相同的关键词排序随机
          ]
        };
      },


      initSocket() {

      },

      closeSocket() {

      }

    },
    components: {
      companyLogo,
      baseData,
      positionByLanguage,
      languageCounts,
      positionBySalary,
      positionByCity,
      top5ByDistrict,
      salaryByWorkYear,
      positionByEducation,
      advantageWords
    },
    mounted() {
      this.initData();

      // 连接到服务器，参数为用户信息 (根据服务器实现决定使用参数)
      this.initSocket();

    },
    beforeDestroy() {
      // 断开连接
      this.closeSocket();
    },
    computed: {
      ...mapGetters([
        'socketMessage'
      ])
    },
    watch: {
      socketMessage: function () {
        this.data = this.socketMessage
      }
    }
  }
</script>

<style lang="scss" scoped>

  .main {
    padding: 10px;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /*height: 100vh;*/
    max-height: calc(100vh - 50px);
    /*min-height: 578px;*/
    overflow-y: hidden;
    margin: 0;
    background: #212E3D;
    min-width: 2020px;
    /*height: 100%;*/
    /*.clear{ clear:both}*/
    .left {
      float: left;
      min-width: 500px;
      width: 25%;
      /*max-height: calc(100vh - 50px);*/
      height: calc(100vh - 50px);
      /*background: red;*/
      #chart1 {
        height: calc((100vh - 50px) * 0.4);

        .chart1-top {
          height: 60%;
          width: 100%;

          b {
            font-size: 18px;
            color: white;
            position: relative;
            left: -172px;
          }
        }

        .chart1-bottom {
          height: 40%;
          width: 100%;
        }
      }

      #chart2 {
        height: calc((100vh - 50px) * 0.3);

        .chart2-main {
          float: left;
          display: inline-block;
          width: 50%;

        }
      }

      #chart3 {
        height: calc((100vh - 50px) * 0.3);
      }

    }

    .center {
      float: left;
      min-width: 1000px;
      width: 50%;
      height: calc(100vh - 50px);
      /*background: blue;*/
    }

    .right {
      float: left;
      min-width: 500px;
      width: 25%;
      height: calc(100vh - 50px);
      /*background: green;*/
      #chart4 {
        height: 30vh;
      }

      #chart5 {
        height: 35%;
      }

      #chart6 {
        height: 35%;

        .chart6-main {
          float: left;
          display: inline-block;
          width: 50%;
        }
      }
    }
  }
</style>
